<template>
  <qt-view class="button-root-css"
       ref="textButtonRef"
       :clipChildren="false"
       :focusable="true"
       :enableFocusBorder="true"
       :focusScale="1.1"
       :style="{width:width,height: height,
       borderRadius:borderRadius,
       focusBorderRadius:borderRadius,
       margin:margin,
       backgroundColor:backgroundColor,
       focusBackgroundColor:focusBackgroundColor
       }"
       @click="onClick"
       @focus="onFocus">
    <p duplicateParentState class="text-root-css"
       :style="{width:width,height: height,
       color:color,fontSize:fontSize,
       borderRadius:borderRadius}"
    >{{ text }}</p>
  </qt-view>
</template>


<script>
import {defineComponent} from "vue";

const {ref} = require("@vue/reactivity");

const {Native} = require("@extscreen/es3-vue");
const {useESToast} = require("@extscreen/es3-core");

export default defineComponent({
  name:'text-button',
  props:{
    index: {
      type: Number,
      default: -1
    },
    text: {
      type: String,
      default: ''
    },
    width:{
      type:Number,
      default:250
    },
    height:{
      type:Number,
      default:80
    },
    color:{
      type:String,
      default:"#40b883"
    },
    fontSize:{
      type:Number,
      default:25
    },
    borderRadius:{
      type:Number,
      default: 8
    },
    backgroundColor:{
      type:String,
      default: '#F9F9F9'
    },
    focusBackgroundColor:{
      type:String,
      default: '#E2E3E5'
    },
    margin:{
      type:Number,
      default: 20
    }
  },
  emits:["onButtonClicked", "onButtonFocused"],
  setup(props,{emit}){
    const textButtonRef=ref()
    const toast = useESToast()
    const onFocus = (e) => {
      let focused = e.isFocused;
      emit("onButtonFocused", focused)
    }

    const onClick = (e) => {
      emit("onButtonClicked")
    }
    function requestFocus(){
      textButtonRef.value.requestFocus()
    }
    return {
      onFocus,
      onClick,
      textButtonRef,
      requestFocus
    }
  }
})


</script>

<style scoped>
.button-root-css {
  justify-content: center;
  align-items: center;
}

.text-root-css {
  text-align: center;
  text-align-vertical: center;
}
</style>
